import React, { memo, useState } from 'react';
import { Button, Space, Tag } from 'antd';
import { FilterOutlined, CloseOutlined } from '@ant-design/icons';
import { useBreakpoint } from '../../../hooks/useBreakpoint';
import { ResponsiveDrawer } from '../../AntdProvider/ResponsiveComponents';
import { Show, Hide } from '../../Responsive/ResponsiveExports';
import { PlatformFilter } from '../PlatformFilter';
import { TimeFilter } from '../TimeFilter';
import { Platform, TimeRange } from '../../../types/hotRadar';
import { platformConfig } from '../../../constants/platforms';
import './style.css';

interface FilterPanelProps {
  platforms: Platform[];
  timeRange: TimeRange | { start: string; end: string };
  onPlatformsChange: (platforms: Platform[]) => void;
  onTimeRangeChange: (timeRange: TimeRange | { start: string; end: string }) => void;
  onClearFilters?: () => void;
}

export const FilterPanel = memo<FilterPanelProps>(({
  platforms,
  timeRange,
  onPlatformsChange,
  onTimeRangeChange,
  onClearFilters,
}) => {
  const breakpoint = useBreakpoint();
  const isMobile = breakpoint === 'mobile';
  const [drawerOpen, setDrawerOpen] = useState(false);

  const hasActiveFilters = platforms.length > 0 || timeRange !== TimeRange.LATEST;

  const handleClearAll = () => {
    onClearFilters?.();
    if (isMobile) {
      setDrawerOpen(false);
    }
  };

  const handleRemovePlatform = (platform: Platform) => {
    onPlatformsChange(platforms.filter(p => p !== platform));
  };

  const FilterContent = (
    <Space direction="vertical" size="large" className="w-full">
      <PlatformFilter
        value={platforms}
        onChange={onPlatformsChange}
      />

      <TimeFilter
        value={timeRange}
        onChange={onTimeRangeChange}
      />

      {hasActiveFilters && (
        <div className="filter-actions">
          <Button
            block
            size={isMobile ? 'large' : 'middle'}
            onClick={handleClearAll}
            icon={<CloseOutlined />}
          >
            清除所有筛选
          </Button>
        </div>
      )}
    </Space>
  );

  return (
    <>
      {/* 桌面端：侧边栏筛选器 */}
      <Hide breakpoint="mobile">
        <div className="filter-panel-desktop">
          {FilterContent}
        </div>
      </Hide>

      {/* 移动端：浮动按钮 + 抽屉 */}
      <Show breakpoint="mobile">
        {/* 浮动筛选按钮 */}
        <Button
          type="primary"
          size="large"
          icon={<FilterOutlined />}
          onClick={() => setDrawerOpen(true)}
          className="filter-floating-button"
          style={{
            position: 'fixed',
            bottom: '80px', // 底部导航栏高度约60px，加上间距20px
            right: '20px',
            width: '56px',
            height: '56px',
            borderRadius: '50%',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
            zIndex: 1000,
          }}
        >
          {hasActiveFilters && (
            <span
              className="filter-badge"
              style={{
                position: 'absolute',
                top: '0',
                right: '0',
                width: '20px',
                height: '20px',
                background: '#ff4d4f',
                borderRadius: '50%',
                border: '2px solid #fff',
                fontSize: '12px',
                color: '#fff',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              {platforms.length}
            </span>
          )}
        </Button>

        {/* 已选筛选条件标签 */}
        {hasActiveFilters && (
          <div className="filter-tags-mobile">
            <Space wrap size="small">
              {platforms.map(platform => {
                const config = platformConfig[platform];
                return (
                  <Tag
                    key={platform}
                    color={config?.color}
                    closable
                    onClose={() => handleRemovePlatform(platform)}
                    className="filter-tag-mobile"
                  >
                    {config?.icon} {config?.name}
                  </Tag>
                );
              })}
              {timeRange !== TimeRange.LATEST && (
                <Tag
                  color="blue"
                  closable
                  onClose={() => onTimeRangeChange(TimeRange.LATEST)}
                  className="filter-tag-mobile"
                >
                  {typeof timeRange === 'string' ? timeRange : '自定义时间'}
                </Tag>
              )}
            </Space>
          </div>
        )}

        {/* 底部抽屉 */}
        <ResponsiveDrawer
          title="筛选热点"
          placement="bottom"
          open={drawerOpen}
          onClose={() => setDrawerOpen(false)}
          height="85%"
          extra={
            <Button
              type="text"
              onClick={() => setDrawerOpen(false)}
              icon={<CloseOutlined />}
            />
          }
        >
          <div className="filter-drawer-content">
            {FilterContent}
          </div>
        </ResponsiveDrawer>
      </Show>
    </>
  );
});

FilterPanel.displayName = 'FilterPanel';
